class Details {
    constructor(options) {
        options = options || {}
        this.box = options.box || document.querySelector("#box")
        this.show = options.show || this.box.querySelector(".show")
        this.showInfo = {
            width: parseFloat(css(this.show, "width")),
            height: parseFloat(css(this.show, "height"))
        }
        this.mask = options.mask || this.show.querySelector(".mask")
        this.maskInfo = {
            width: parseFloat(css(this.mask, "width")),
            height: parseFloat(css(this.mask, "height"))
        }
        this.bigBox = options.bigBox || this.box.querySelector(".bigBox")
        this.bigBoxInfo = {
            width: parseFloat(css(this.bigBox, "width")),
            height: parseFloat(css(this.bigBox, "height"))
        }
        this.bigImg = options.bigImg || this.bigBox.querySelector("img")
        this.bigImgInfo = {
            width: parseFloat(css(this.bigImg, "width")),
            height: parseFloat(css(this.bigImg, "height"))
        }
        this.price = 998
        this.count = 1
        this.totalPrice = 998
        this.priceEle = document.querySelector(".price").lastElementChild
        this.countEle = document.querySelector(".count").children[0]
        this.totalEle = document.querySelector(".total").lastElementChild
        this.choose = document.querySelector(".choose")
        this.chooseLi = this.choose.querySelectorAll("li")
        this.init()
    }
    init() {
        this.changeCount()
        this.magnifier()
        this.clickEvent()
        this.computed()
        this.changeProd()
        this.addToCar()
    }
    magnifier() {
        this.resetBigBox()
        this.enterOut()
        this.move()
    }
    resetBigBox() {
        // 重置大盒子大小
        /* 
            mask 大小   大盒子大小
            ------   = ---------
            show 大小  大图大小
        
        */
        let _width = this.maskInfo.width * this.bigImgInfo.width / this.showInfo.width
        let _height = this.maskInfo.height * this.bigImgInfo.height / this.showInfo.height
        css(this.bigBox, "width", _width + "px")
        css(this.bigBox, "height", _height + "px")

        // 更新 bigBoxInfo  里面的数据
        this.bigBoxInfo = {
            width: _width,
            height: _height
        }
    }
    enterOut() {
        on(this.show, 'mouseenter', (e) => {
            css(this.mask, "display", "block")
            css(this.bigBox, "display", "block")
        })
        on(this.show, 'mouseleave', (e) => {
            css(this.mask, "display", "none")
            css(this.bigBox, "display", "none")
        })
    }
    move() {
        on(this.show, 'mousemove', (e) => {
            let _left = e.pageX - this.box.offsetLeft - this.maskInfo.width / 2
            let _top = e.pageY - this.box.offsetTop - this.maskInfo.height / 2
            if (_left <= 0) {
                _left = 0
            } else if (_left >= this.showInfo.width - this.maskInfo.width) {
                _left = this.showInfo.width - this.maskInfo.width
            }
            if (_top <= 0) {
                _top = 0
            } else if (_top >= this.showInfo.height - this.maskInfo.height) {
                _top = this.showInfo.height - this.maskInfo.height
            }
            css(this.mask, "left", _left + "px")
            css(this.mask, "top", _top + "px")


            /* 
                mask 移动的距离             大图移动的距离
                --------------      =       --------------
                mask 可移动的最大距离       大图可移动的最大距离
            */
            let _x = _left * (this.bigImgInfo.width - this.bigBoxInfo.width) / (this.showInfo.width - this.maskInfo.width)
            let _y = _top * (this.bigImgInfo.height - this.bigBoxInfo.height) / (this.showInfo.height - this.maskInfo.height)
            css(this.bigImg, "left", -_x + "px")
            css(this.bigImg, "top", -_y + "px")
        })
    }
    clickEvent() {
        let ul = document.querySelector("ul")
        let lis = ul.querySelectorAll("li")
        // console.log(ul);
        on(ul, 'click', (e) => {
            // 通过  e.target.nodeName  判断 点击的是不是 li 
            if (e.target.nodeName === 'IMG') {
                // console.log(e.target)
                // 1、首先应该改变 li 的边框颜色  但是在这个地方  e.target 指向的是 img  所以要想办法拿到  Img 的父元素(parentNode)

                let li = e.target.parentNode
                // console.log(li)
                // 设置当前的 li 改变边框颜色之前  先把 其他所有的 边框颜色改成白色
                for (let i = 0; i < lis.length; i++) {
                    css(lis[i], "borderColor", "#fff")
                }
                css(li, "borderColor", "red")
                // 2、拿到当前的（li）索引   0 1 2 3
                let index = Array.from(lis).indexOf(li)
                // 3、设置 show 和 bigBox 盒子里面的图片 
                let showImg = this.show.firstElementChild
                // console.log(this.show.firstElementChild)
                showImg.setAttribute("src", `./img/show_${index + 1}.jpg`)
                this.bigImg.setAttribute("src", `./img/big_${index + 1}.jpg`)
            }
        })
    }
    // 点击 +-按钮 数量总价 
    computed() {
        let reduce = document.querySelector(".reduce")
        let add = document.querySelector(".add")

        on(reduce, 'click', () => {
            // 改变  this 指向
            // changeCount("reduce")
            this.changeCount("reduce")
        })
        on(add, 'click', () => {
            // // 数量 +1 
            // this.count++
            // if(this.count >= 5){
            //     alert("还受得了不")
            // }
            // this.totalPrice = this.count * this.price

            // this.countEle.value = this.count
            // this.totalEle.innerText = this.totalPrice
            this.changeCount("add")
        })
    }
    changeCount(str) {
        if (str === "reduce") {
            this.count--
        } else if(str === "add") {
            this.count++
        }

        if (this.count >= 5) {
            alert("还受得了不")
        }
        if (this.count <= 1) {
            this.count = 1
        }
        this.totalPrice = this.count * this.price

        this.countEle.value = this.count
        this.totalEle.innerText = this.totalPrice

        this.priceEle.innerText = this.price



    }

    changeProd() {
        on(this.choose, 'click', (e) => {
            if (e.target.nodeName == 'SPAN' || e.target.nodeName == 'IMG') {
                let index = Array.from(this.chooseLi).indexOf(e.target.parentNode)
                if (index === 0) {
                    this.price = "110"
                } else if (index === 1) {
                    this.price = "119"
                } else {
                    this.price = "998"
                }
                this.changeCount()
            }
        })
    }

    addToCar() {
        let loadingEle = document.querySelector(".loading")
        let btn = document.querySelector("a")
        on(btn, 'click', (e) => {
            // 阻止默认事件 
            e.preventDefault()
            fadeIn(loadingEle, 500,function(){
                setTimeout(function(){
                    fadeOut(loadingEle, 500)
                },1000)
            })
    
        })
    }


}